<template>
	<view class="wrap">
		<view class="header-wrap">
			<view class="nav-wrap">
				<u-icon name="arrow-left" color="#333333" size="24" @click="back"></u-icon>
				<view class="types">
					<tabs :active="active" @change="changeShow" :config="{itemWidth: 120}">
						<tab v-for="(item, index) in types" :key="index" :title="item.name" :name="item.type"></tab>
					</tabs>
				</view>
				<u-icon name="plus" color="#333333" size="24" @click="goRegister"></u-icon>
			</view>
			<view class="filter-wrap">
				<u-search v-model="params.plateNum" placeholder="请输入车牌号" shape="square" actionText="搜索" :animation="true" @custom="search" @search="search">
				</u-search>
				<view class="filter">
					<view class="item" @click="selectTeam(1)">
						<view style="margin-right: 8rpx;" :class="{'active':currentTeam === 1}">车辆类型</view>
						<u-icon name="arrow-down-fill" size="10"></u-icon>
					</view>
					<view class="item" @click="selectTeam(2)">
						<view style="margin-right: 8rpx;" :class="{'active':currentTeam === 2}">车辆性质</view>
						<u-icon name="arrow-down-fill" size="10"></u-icon>
					</view>
					<view class="item" @click="selectTeam(3)" v-if="params.type == 2">
						<view style="margin-right: 8rpx;" :class="{'active':currentTeam === 3}">认证状态</view>
						<u-icon name="arrow-down-fill" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
		<view class="content" v-if="!loading">
			<view class="top-tips-box" :style="{'opacity':opacity,}">
				<view class="loading-box">
					<u-loading-icon></u-loading-icon>
					<text>{{pullingText}}</text>
				</view>
			</view>
			<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll"
				v-if="list.length" :style="{'transition-duration':`${duration}ms`,transform: `translateY(${move}rpx)`}"
				@touchstart="touchstart($event)" @touchmove="touchmove" @touchend="touchend">
				<view>
					<List sort="vehicle" :type="params.type" :list="list"></List>
					<view class="tip">
						<u-loadmore :line="true" :status="status" :loading-text="loadingText" :nomore-text="nomoreText"
							color="#9E9E9E" />
					</view>
				</view>
			</scroll-view>
			<view class="empty" v-else>
				<u-empty v-if="menuFlag" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				<u-empty v-else mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="showType" @close="typeCancel" :round="10" mode="top">
			<view class="popup-wrap">
				<view class="popup-list">
					<view class="type-box" v-if="currentTeam === 1">
						<view class="type-item">
							<view :class="typeListValue == item.value ? 'active' : ''" v-for="(item, index) in typeList"
								:key="item.value" @click="typeClick(item.value, index)">{{item.label}}</view>
						</view>
						<view class="type-item">
							<view :class="typeListValue2 == item.value ? 'active' : ''"
								v-for="(item, index) in typeList2" :key="item.value"
								@click="typeClick2(item.value, index)">{{item.label}}</view>
						</view>
						<view class="type-item">
							<view :class="typeListValue3 == item.value ? 'active' : ''"
								v-for="(item, index) in typeList3" :key="item.value" @click="typeClick3(item.value)">
								{{item.label}}
							</view>
						</view>
					</view>
					<view class="box third" v-if="currentTeam === 2">
						<text v-for="(item, index) in natureColumns" :key="index" @click="natureChange(item)"
							:class="{'active':natureValue == item.id}">{{item.name}}</text>
					</view>
					<view class="box third" v-if="currentTeam === 3">
						<text v-for="(item, index) in stateColumns" :key="index" @click="stateChange(item)"
							:class="{'active':stateValue == item.id}">{{item.name}}</text>
					</view>
				</view>
				<view class="popup-btn">
					<view class="cancel btn" @click="typeCancel">取消</view>
					<view class="confirm btn" @click="typeConfirm">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getVehicleType,
		vehicleList
	} from '@/config/api/app.js'
	import List from '@/components/list/list.vue'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				refreshFlag: true,
				gap: 100,
				touchFlag: false,
				startY: null,
				move: 0,
				opacity: 0,
				duration: 0,
				pullingText: '下拉刷新',

				menu: Cache.get('MENU'),
				menuFlag: false,
				active: 1,
				types: [{
					name: '车辆管理',
					type: 1,
					isShow: false
				}, {
					name: '待审核',
					type: 2,
					isShow: false
				}],

				params: {
					status: '',
					vehicleType: '',
					pageSize: 15,
					pageNum: 1,
					vehicleNature: '',
					plateNum: '',
					type: 1 // 1是 车辆通过的， 2是待审核车辆
				},
				pages: '', //总的页码
				list: [],
				status: 'loadmore',
				loadingText: '努力加载中...',
				nomoreText: '没有更多了！',
				loading: true,
				typeList: [],
				typeList2: [],
				typeList3: [],
				typeListValue: '',
				typeListValue2: '',
				typeListValue3: '',
				plateValue: '',

				currentTeam: null,
				showType: false,
				natureValue: 0,
				stateValue: 0,
				natureColumns: [{
						name: '全部',
						id: 0
					},
					{
						name: '公司车辆',
						id: 1
					},
					{
						name: '自有车辆',
						id: 2
					}
				],
				stateColumns: [{
						name: '全部',
						id: 0
					},
					{
						name: '待审核',
						id: 1
					},
					{
						name: '已驳回',
						id: 3
					},
					{
						name: '申诉中',
						id: 4
					},
				],
			}
		},
		created() {
			this.getType()
		},
		onLoad(options) {
			const {
				types
			} = this
			let type = options.type || 1;
			let index = types.findIndex(item => item.type == type)
			this.changeShow(index);
		},
		onShow() {
			if (this.params.type == 1 && this.menu.vehicleList == 0) {
				this.list = []
				this.loading = false
				this.menuFlag = false
				return
			}
			if (this.params.type == 2 && this.menu.vehicleReviewlist == 0) {
				this.list = []
				this.loading = false
				this.menuFlag = false
				return
			}
			this.params.pageNum = 1
			this.getVehicleList()
		},
		methods: {
			touchstart(e) {
				if (!this.refreshFlag) return
				if (this.pullingText === '下拉刷新') {
					this.duration = 0;
					this.touchFlag = true;
					this.startY = e.touches[0].clientY;
				}
			},
			touchmove(e) {
				let endY = e.touches[0].clientY
				let top = endY - this.startY
				if (this.touchFlag && top > 0) {
					if (top < this.gap) {
						this.ppullingText = '下拉刷新';
						if (top <= 0) top = 0
					} else if (top > this.gap + 10) {
						top = this.gap
						this.pullingText = '释放刷新'
					}
					this.move = top;
					let opacity = (top * 0.015).toFixed(2) > 1 ? 1 : (top * 0.015).toFixed(2);
					this.opacity = opacity;
				}
			},
			touchend() {
				this.duration = 300;
				if (this.pullingText === '下拉刷新') {
					this.reset();
				} else if (this.pullingText === '释放刷新') {
					console.log(this.move)
					this.touchFlag = false;
					if (this.move > 0) {
						// this.move = 100;
						this.pullingText = '努力加载中...';
						setTimeout(() => {
							this.params.pageNum = 1
							this.getVehicleList()
						}, 600)
					}
				}
			},
			reset() {
				this.touchFlag = false;
				this.startY = null;
				this.move = 0;
				this.opacity = 0;
				this.pullingText = '下拉刷新'
			},
			scrolltolower() {
				this.params.pageNum += 1
				if (this.params.pageNum > this.pages) {
					this.status = 'nomore'
					return
				}
				uni.$u.throttle(this.getVehicleList(), 3000)
			},
			scroll(e) {
				e.target.scrollTop <= 0 ? this.refreshFlag = true : this.refreshFlag = false
			},
			//	获取车辆列表
			getVehicleList() {
				console.log({
						...this.params
					})
				vehicleList({
					params: {
						...this.params
					}
				}).then((res) => {
					// console.log(res.data)
					if (res.code == 0) {
						this.reset()
						this.loading = false
						this.status = 'loading'
						this.params.pageNum == 1 ? this.list = res.data.list : this.list.push(...res.data.list)
						this.pages = res.data.pages
						if (this.pages == this.params.pageNum) this.status = 'nomore'
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//	获取车辆类型
			getType() {
				getVehicleType().then((res) => {
					if (res.code == 0) {
						this.typeList = res.data
						this.typeList2 = this.typeList[0].children
						this.typeList3 = this.typeList2[0].children
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			typeClick(value, index) {
				if (this.typeListValue == value) {
					return
				}
				this.typeListValue = value
				this.typeListValue2 = ''
				this.typeListValue3 = ''
				this.typeList2 = this.typeList[index].children
				this.typeList3 = this.typeList2[0].children
			},
			typeClick2(value, index) {
				if (this.typeListValue2 == value) {
					return
				}
				if (!this.typeListValue) {
					this.typeListValue = this.typeList[0].value
				}
				this.typeListValue2 = value
				this.typeListValue3 = ''
				this.typeList3 = this.typeList2[index].children
			},
			typeClick3(value) {
				if (this.typeListValue3 == value) {
					return
				}
				if (!this.typeListValue) {
					this.typeListValue = this.typeList[0].value
				}
				if (!this.typeListValue2) {
					this.typeListValue2 = this.typeList2[0].value
				}
				this.typeListValue3 = value
			},
			back() {
				uni.navigateBack()
			},
			goRegister() {
				uni.navigateTo({
					url: "/pages/vehicle/register"
				})
			},
			changeShow(index) {
				console.log(this.menu, '=============')
				this.types.forEach(item => {
					item.isShow = false
				})
				if (index != -1) {
					this.active = index
					this.types[index].isShow = true
					this.params.type = this.types[index].type
					if (this.params.type == 1 && this.menu.vehicleList == 0) {
						this.list = []
						this.menuFlag = false
						return
					}
					if (this.params.type == 2 && this.menu.vehicleReviewlist == 0) {
						this.list = []
						this.menuFlag = false
						return
					}
					this.menuFlag = true
					this.showType = false
					this.currentTeam = null
					this.params.pageNum = 1
					this.params.vehicleNature = ''
					this.params.status = ''
					this.params.vehicleType = ''
					this.params.plateNum = ''
					this.natureValue = 0
					this.stateValue = 0
					this.typeListValue = ''
					this.typeListValue2 = ''
					this.typeListValue3 = ''
					this.typeList2 = this.typeList.length && this.typeList[0].children
					this.typeList3 = this.typeList2.length && this.typeList2[0].children
					this.loading = true
					this.status = 'loadmore'
					this.getVehicleList()
				}
			},
			selectTeam(num) {
				if (!this.menuFlag) {
					return
				}
				this.currentTeam = num
				this.showType = true
			},
			search(e) {
				if (!this.menuFlag) {
					return
				}
				this.params.plateNum = uni.$u.trim(e)
				this.params.pageNum = 1
				this.getVehicleList()
			},
			typeCancel() {
				console.log("typeCancel")
				this.showType = false
				this.currentTeam = null
				this.natureValue = this.params.vehicleNature || 0
				this.stateValue = this.params.status || 0
				this.typeListValue3 = this.params.vehicleType
			},
			typeConfirm() {
				console.log("typeConfirm")
				this.showType = false
				this.currentTeam = null
				this.params.vehicleNature = this.natureValue == 0 ? '' : this.natureValue
				this.params.vehicleType = this.typeListValue3
				this.params.status = this.stateValue == 0 ? '' : this.stateValue
				this.params.pageNum = 1
				this.getVehicleList()
			},
			natureChange(item) {
				console.log(item)
				this.natureValue = item.id
			},
			stateChange(item) {
				console.log(item)
				this.stateValue = item.id
			},
		},
		components: {
			List
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.tip {
		margin-top: 32rpx;
		padding-bottom: 24rpx;
	}

	.wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 320rpx 0 0;
	}

	.popup-wrap {
		padding: 0 32rpx 32rpx;
		margin-top: 330rpx;
		border-top: 1rpx solid #FAFAFA;
		position: relative;
		z-index: 10080;

		.popup-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 80rpx;
				border-radius: 12rpx;
				text-align: center;
				box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
				box-sizing: border-box;
			}

			.cancel {
				color: #333333;
				width: 40%;
				background: #fff;
				border: 1rpx solid #e9e9e9;
			}

			.confirm {
				width: 55%;
				color: #FFFFFF;
				background: linear-gradient(to right, #4d83b9, #003E81);
			}
		}

		.popup-list {
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;

			.type-box {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				padding: 12rpx 0;

				.type-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					font-size: 26rpx;
					font-weight: 400;
					color: #666;
					line-height: 64rpx;
					height: 580rpx;
					overflow: auto;

					.active {
						color: #034082;
						font-weight: 500;
					}

					&:nth-child(2) {
						border-left: 1rpx solid #FAFAFA;
						border-right: 1rpx solid #FAFAFA;
					}
				}
			}

			.box {
				padding: 32rpx 0 0;
			}

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 24rpx 0;
				background: #FAFAFA;
				border-radius: 4rpx;
				margin-bottom: 32rpx;

				&.active {
					background: #F0F7FF;
				}
			}

			.third {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				text {
					width: 30%;

					&:nth-child(3n-1) {
						margin-right: 5%;
						margin-left: 5%;
					}
				}
			}

			.second {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				text {
					width: 45%;
				}
			}
		}
	}

	.header-wrap {
		position: absolute;
		z-index: 10076;
		top: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		padding: 90rpx 24rpx 16rpx;
		background: #fff;
	}

	.nav-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.types {
			width: 40%;
		}
	}

	.filter-wrap {
		background: #fff;
		margin-top: 12rpx;

		.filter {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 18rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				width: 33.33%;
				// padding: 0 32rpx;

				.active {
					color: #003E81;
				}
			}
		}
	}

	.content {
		box-sizing: border-box;
		border-top: 1rpx solid #FAFAFA;
		width: 100%;
		height: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		// background: #fff;

		.scroll-box {
			position: relative;
			height: 100%;
			background: #fff;
		}

		.top-tips-box {
			position: absolute;
			left: 0;
			right: 0;
			// transform: translateY(-100%);
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			text-align: center;
			opacity: 0;
			overflow: hidden;
			font-size: 28rpx;
			// z-index: -1;
			color: #9e9e9e;

			.loading-box {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.empty {
			margin-top: 100rpx;
		}
	}
</style>
